<template>
  <div>
    <!-- 弹出框 -->
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '50%' }"
    >
      <Mines></Mines>
    </van-popup>
    <!-- 头部 -->
    <van-nav-bar left-arrow>
      <template #left>
        <van-icon name="contact" @click="showPopup" style="font-size: 22px" />
      </template>
      <template #title>
        <h3>等待接单</h3>
      </template>
      <template #right>
        <van-icon name="more-o" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <div class="box">
      <div class="one" v-for="(item, index) in list" :key="index">
        <div class="left">
          <p>{{ item.one }}</p>
          <p>{{ item.two }}</p>
          <p>{{ item.three }}</p>
        </div>
        <div class="right">
          <button
            class="button"
            :class="{ disabled: !item.canClick }"
            @click="countDown(item)"
          >
            {{ item.content }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mines from "@/views/sijiduan/Mines";
export default {
  components: {
    Mines,
  },
  data() {
    return {
      content1: "点击抢单",
      content2: "点击抢单",
      content3: "点击抢单",
      show: false,
      //添加canClick
      list: [
        {
          one: "下单时间: 10:55",
          two: "位置: 昌平西关",
          three: "距离您2.8公里",
          content: "点击抢单",
          canClick: true,
          aa: false,
          totalTime: 5,
        },
        {
          one: "下单时间: 10:55",
          two: "位置: 昌平西关",
          three: "距离您2.8公里",
          content: "点击抢单",
          canClick: true,
          aa: false,
          totalTime: 5,
        },
        {
          one: "下单时间: 10:55",
          two: "位置: 昌平西关",
          three: "距离您2.8公里",
          content: "点击抢单",
          canClick: true,
          aa: false,
          totalTime: 5,
        },
      ],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    countDown(item) {
      if (!item.canClick) return; //改动的是这两行代码
      item.canClick = false;
      item.content = item.totalTime + "秒";
      let clock = window.setInterval(() => {
        item.totalTime--;
        item.content = item.totalTime + "秒";
        if (item.totalTime < 0) {
          window.clearInterval(clock);
          item.content = "抢单成功";
          item.totalTime = 5;
          // item.canClick = true; //这里重新开启
        }
        if (item.totalTime === 1) {
          item.aa = true;
          this.$router.replace("/go");
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.one {
  width: 92%;
  height: 110px;
  // border: 1px solid #999;
  border-radius: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background: skyblue;
  .left {
    p {
      padding: 5px 0 5px 20px;
    }
  }
  .right {
    padding-right: 20px;
    button {
      width: 70px;
      height: 35px;
      border-radius: 10px;
      border: 0;
    }
  }
}
</style>